<template>
  <div class="createCource">
    <div class="course-top">
      <div class="top-left">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>智慧体育课堂</el-breadcrumb-item>
          <el-breadcrumb-item>设备列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div @click="back" class="top-right">
        返回
      </div>
    </div>
    <div class="table">
      <div class="table-top">
        <el-table
          v-loading="isLoading"
          height="60vh"
          :data="tableSource"
          style="width: 100%"
          >
          <el-table-column
            prop="equipmentName"
            label="设备名称"
            align="center"
           >
          </el-table-column>
          <el-table-column
            prop="equipmentRemarks"
            label="设备描述"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="部署图片"
          >
            <template slot-scope="scope">
              <img v-if="scope.row.equipmentDeploy" :src="$store.state.user.BASE_URL + scope.row.equipmentDeploy" alt="">
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
          >
            <template slot-scope="scope">
              <el-link type="success">正常</el-link>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <div class="table-page">
        <pagination-page @size="changeSize" @page="changePage" :total="total" />
      </div>
    </div>
  </div>
</template>

<script>
import {getEquipmentList} from "@/api/device";

export default {
  data() {
    return {
      tableSource:[],
      isLoading:false,
      pageInfo:{
        pageSize: 10,
        pageIndex: 1,
      },
      total:0
    };
  },
  created() {
    this.getSource();
  },
  methods: {
    changePage(e){
      this.pageInfo.pageIndex = e;
      this.getSource()
    },
    changeSize(size){
      this.pageInfo.pageSize = size;
      this.getSource();
    },
   getSource(){
     this.isLoading = true;
     getEquipmentList(this.pageInfo).then((res) => {
       if (res.code == 200) {
         this.tableSource = res.result;
         this.total = res.total;
         this.isLoading = false;
       }
     });
   },
    back(){
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
.createCource {
  width: 80vw;
  margin: auto;
  .course-top {
    display: flex;
    justify-content: space-between;
    padding: 1vh 0;
    ::v-deep .el-breadcrumb__inner {
      font-size: 1vw;

    }
    .top-right {
      font-size: 1vw ;
      color: #1677FF;
    }
  }
  .table {
    height: 80vh;
    background: #fff;

    .table-top {
      max-height: 70vh;
      padding: 2vw;
      width: 100%;

      ::v-deep .el-table th, .el-table tr  {
        background: #FAFAFA;
        color: #3D3D3D;
      }
    }
    .table-page {
      display: flex;
      justify-content: center;
      align-items: center;

    }
  }
}
</style>
